<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <!--获取屏幕宽度，根据屏幕宽度进行自适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入Bootstrap-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--自定义工具-->
    <script src="js/HttpUtil.js"></script>
    <!--导入vue 包-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/Data.js"></script>

    <link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
    <link href="AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css" />

    <link href="css/demo.css" rel="stylesheet" type="text/css" />

    <style>
        .hideTable{
            display: none;
        }
        .showTable{
            display: block;
        }
    </style>

</head>
<body>
<div class="am-container header">
    <ul class="message-l">
        <div class="topMessage">
            <div class="menu-hd" id="AA">
                <a href="login.html" id="a1" target="_top" class="h">亲，请登录</a>
                <a href="register.html" id="a2" target="_top">免费注册</a>
            </div>
        </div>
    </ul>
    <ul class="message-r">
        <div class="topMessage home">
            <div class="menu-hd"><a href="home2.html" target="_top" class="h">商城首页</a></div>
        </div>
        <div class="topMessage my-shangcheng">
            <div class="menu-hd MyShangcheng"><a href="information.html" target="_top"><i class="am-icon-user am-icon-fw"></i>个人中心</a></div>
        </div>
        <div class="topMessage mini-cart">
            <div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" target="_top"><i class="am-icon-shopping-cart am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum" class="h">0</strong></a></div>
        </div>
        <div class="topMessage favorite">
            <div class="menu-hd"><a href="http://localhost:8080/views/shop-admin/login_admin.html" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>卖家中心</span></a></div>
        </div>
        <div class="topMessage favorite">
            <div class="menu-hd"><a href="orderList.html" target="_top"><i class="am-icon-star am-icon-fw"></i><span>个人订单</span></a></div>
        </div>
    </ul>
</div>
<div class="container" id="div_vue">
    <div class="row">
        <div style="padding: 20px;">
        <h1 style="font-size: 40px;">用户订单列表</h1>
        </div>
    </div>
    <div class="row">
        <ul class="nav nav-pills">
            <li role="presentation"><button @click="displayList()" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                全部订单
            </button></li>
            <li role="presentation"><button @click="payment(1)" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                待付款
            </button></li>
            <li role="presentation"><button @click="payment(2)" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                待发货
            </button></li>
            <li role="presentation"><button @click="payment(3)" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                待收货
            </button></li>
<!--            <li role="presentation"><button @click="payment(4)" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">-->
<!--                待评价-->
<!--            </button></li>-->
        </ul>
    </div>
    <div class="row">
        <table class="table">
            <tr>
                <th>订单ID</th>
                <th>时间追踪</th>
                <th>订单状态</th>
                <th>交易金额</th>
                <th>订单操作</th>
            </tr>
            <tr v-for="orders in orderList">
                <td>{{orders.id}}</td>
                <td>{{orders.creationTime}}</td>
                <td v-if="orders.status === 1">待付款</td>
                <td v-if="orders.status === 2">待发货</td>
                <td v-if="orders.status === 3">待收货</td>
                <td v-if="orders.status === 4">已完成</td>
                <td>{{orders.paymentAmount}}</td>
                <td><input type="button" @click="change(orders)" v-model="obligation" value="{{ obligation }}"
                           class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                   <input type="button" @click="check(orders)" :id="orders.id" @mouseleave="mouseLeave" value="查看详情" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
                </td>
            </tr>

            <tr id="checkGoods">
                <td colspan="6">
                    <table id="t1" class="hideTable">
                        <tr>
                            <th class="col-xs-1">商品</th>
                            <th class="col-xs-6">商品名</th>
                            <th class="col-xs-2">商品数量</th>
                            <th class="col-xs-2">单价</th>
                        </tr>
                        <tr v-for="check in checkListById">
                            <td class="col-xs-1"><img :src="check.imageUrl" style="height: 80px"></td>
                            <td class="col-xs-7">{{check.name}}</td>
                            <td class="col-xs-2">{{check.amount}}</td>
                            <td class="col-xs-2">{{check.price}}</td>
                        </tr>
                    </table>
                </td>
            </tr>

        </table>
    </div>
</div>
</body>
</html>
<script>
    $(function () {
        OnDisplay()
    })
    var Json = localStorage.getItem("client");
    var user = JSON.parse(Json);
    console.log(user.id);



    function changeTable(){
        document.getElementById('t1').className = "showTable";
    };

    function hideTable1(){
        document.getElementById('t1').className = "hideTable";
    };

    let vm = new Vue({
        el: '#div_vue',
        data: {
            orderList:[],
            obligation:[],
            checkListById:[],
        },
        //方法定义的区域
        methods: {checkList:"",
            //触发事件，发起请求获取所有订单列表
            displayList: function () {
                let thisObj = this;
                let url = "orders";
                // let user = JSON.parse(sessionStorage.getItem("client"));
                // console.log(user.id);
                // let params = {userId:?};
                // let user = localStorage.getItem("client");
                get(url,function (data) {
                    // console.log(data);
                    thisObj.orderList = data;
                    thisObj.obligation = "联系客服";
                });
            },

            // 根据状态值与用户id查询订单
            payment: function(e){
                let thisobj =this;
                thisobj.e = e;
                let url = "state";
                let params = {status:e,userId:1};
                postWithJson(url,params,function (data) {
                    thisobj.orderList = data;
                    if (e === 1) {
                        thisobj.obligation = "确认付款";
                    }else if (e === 2) {
                        thisobj.obligation = "催促发货";
                    }else if (e === 3) {
                        thisobj.obligation = "确认收货";
                    }
                });
            },
            // 点击按钮修改订单状态值
            change: function(orders){
                let thisObj = this;
                let url = "chang";
                let id = orders.id;
                let status = orders.status;
                let params = {id:id,status:status};
               postWithJson(url,params,function (data) {
                   thisObj.displayList();
               })
            },
            //点击按钮查询订单详情
            check:function (orders){
                let thisObj = this;
                let url = "details";
                let id = orders.id;
                let params = {id:id};
                postWithJson(url,params,function (data) {
                    thisObj.checkListById = data;
                    let id = orders.id;
                    let parent = $("#" + id).parent().parent();
                    let checkGoods = $("#checkGoods");
                    parent.after(checkGoods);
                });
                document.getElementById('t1').className = "showTable";
                 changeTable();
            },

            //鼠标离开事件
            mouseLeave:function () {
                hideTable1();
            },
        },

        //页面加载前，对属性进行重新赋值
        create:function(){
        },

        //页面加载完成后，并且vue对象加载完成之后才会调用的方法
        mounted: function () {
            this.displayList();
        }
    });



    //为页面搜索功能实现功能
    //获取搜索按钮
/*    let topsearch = document.getElementById("ai-topsearch");
    //搜索按钮绑定点击事件
    topsearch.onclick = function () {
        let searchInput = document.getElementById("searchInput");
        let value = searchInput.value;
        //跳转到详情页,把id带过去
        let openUrl = "http://localhost:8080/views/shop/search.html";
        window.open(openUrl+"?"+value)

    }*/

</script>